<template>
  <div style="padding:20px">
    <!-- 收集筛选条件的表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.name" placeholder="讲师姓名"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchObj.level" placeholder="讲师头衔">
          <el-option label="高级讲师" value="1"/>
          <el-option label="首席讲师" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="入驻时间">
        <el-date-picker
          v-model="searchObj.joinDateBegin"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"/>
        -
        <el-date-picker
          v-model="searchObj.joinDateEnd"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button plain @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
    <!-- 批量删除按钮 -->
    <div>
      <el-button type="danger" @click="handleBatchDel">批量删除</el-button>
    </div>
    <!-- 查询所有讲师 -->
    <el-table
      :data="teachers"
      stripe
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        type="index"
        width="50"/>
      <el-table-column
        prop="name"
        label="姓名"
        width="120"/>
      <el-table-column
        prop="avatar"
        label="头像"
        width="150">
        <template slot-scope="scope">
          <!-- scope.row代表正在遍历显示的行记录json对象 -->
          <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width:120px;height:120px">
          <img v-else src="https://zsyal-guli.oss-cn-shanghai.aliyuncs.com/avatar/default.jpg" style="width:120px;height:120px">

        </template>
      </el-table-column>
      <el-table-column
        prop="level"
        label="头衔">
        <template slot-scope="scope">
          <!-- scope.row代表正在遍历显示的行记录json对象 -->
          <el-tag
            :type="scope.row.level === 1 ? 'primary' : 'success'"
            disable-transitions>{{ scope.row.level===1?'高级讲师':'首席讲师' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"/>
      <el-table-column
        prop="career"
        label="资历"
        show-overflow-tooltip
      />
      <el-table-column
        prop="joinDate"
        label="加入日期"/>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- el的分页组件：
          current-page： 当前页码
          page-size： 每页显示的记录条数
          total: 总记录条数
     -->
    <div style="text-align:center;padding:20px" >
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[3, 5, 7, 10,20]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script>
import teacherApi from '@/api/teacher'
export default {
  // 相当于在vue对象内写代码
  data() {
    return {
      searchObj: {},
      teachers: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
      selectedTeachers: []
    }
  },
  created() {
    // this.getTeacherList()
    this.getTeacherPage()
  },
  methods: {
    handleSelectionChange(val) { // val就代表选中行的json对象的集合
      // console.log(val)
      this.selectedTeachers = val
    },

    // 批量删除
    handleBatchDel() {
      // 获取选中的行的记录的id值集合
      // 判断，如果有元素便利集合中的json对象的集合
      if (this.selectedTeachers.length === 0) {
        this.$message.warning('请选择要删除的数据')
        return
      }
      const ids = []
      // 如果有元素遍历选中的行的json对象的集合
      this.selectedTeachers.forEach(row => {
        ids.push(row.id)
      })
      console.log(ids)
      // 提交异步请求批量删除
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 用户点击确认按钮的回调
        // 异步提交删除请求，删除成功后刷新当前页面
        teacherApi.batchRemove(ids).then(r => {
          this.$message.success(`删除成功`)
          // 删除后刷新页面
          this.getTeacherPage()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 编辑按钮单击事件
    handleEdit(index, row) {
      // 跳转到编辑页面 并携带row的id值到下一个页面
      this.$router.push(`/teacher/edit/${row.id}`)
    },

    // 删除讲师
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该讲师, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 用户点击确认按钮的回调
        // 异步提交删除请求，删除成功后刷新当前页面
        teacherApi.remove(row.id).then(r => {
          this.$message.success(`删除【${row.name}】成功`)
          // 删除后刷新页面
          this.getTeacherPage()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 带条件的查询的单击事件
    search() {
      // 提交分页查询时会使用之前的 页码和分页记录条数  提交查询请求
      this.pageNum = 1
      this.getTeacherPage()
    },
    // 清空按钮单击事件
    clear() {
      this.searchObj = {}
      this.pageNum = 1
      this.getTeacherPage()
    },

    // 选择每页显示多少条记录后改变后的回调
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      // 重新查询分页数据
      this.getTeacherPage()
    },
    // 重新选择新的页码后的回调
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNum = val
      this.getTeacherPage()
    },
    getTeacherPage() {
      teacherApi.teacherPage(this.pageNum, this.pageSize, this.searchObj).then(r => {
        this.teachers = r.data.page.records// 获取分页对象中的分页数据集合
        this.total = r.data.page.total
      })
    },

    getTeacherList() {
      teacherApi.teacherList().then(r => {
        console.log(r.data.items)
        // 解析异步请求查询到的讲师列表保存
        this.teachers = r.data.items
      })
    }
  }
}
</script>
